<template>
  <section v-if="!isEdit" class="f-order-sale-detail w-card">
    <div class="title-box">
      <span class="title-text">商户详情</span>
      <div>
        <el-button type="primary" plain @click="isEdit = true">编辑</el-button>
      </div>
    </div>

    <div class="f-card">
      <p class="f-title">基础信息</p>
      <ul class="f-ul">
        <li>
          <p>商户名称：</p>
          <p>{{formData.shopName || '--'}}</p>
        </li>
        <li>
          <p>商户ID：</p>
          <p>{{formData.shopId || '--'}}</p>
        </li>
        <li>
          <p>登录号码：</p>
          <p>{{formData.phone || '--'}}</p>
        </li>
        <li>
          <p>联系人姓名：</p>
          <p>{{formData.contactsName || '--'}}</p>
        </li>
        <li>
          <p>联系人电话：</p>
          <p>{{formData.contactsPhone || '--'}}</p>
        </li>
        <li>
          <p>商户状态：</p>
          <p :style="{color: operationalStatusColor[formData.operationalStatus]}">
            {{ operationalStatus[formData.operationalStatus] }}
          </p>
        </li>
        <li>
          <p>上级商户：</p>
          <p>{{ formData.supplierShopName || '--' }}</p>
        </li>
        <li>
          <p>创建时间：</p>
          <p>{{ getDateTime(formData.createTime)[6] || '--'}}</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">
        <span>实名信息</span>
      </p>
      <ul class="f-ul">
        <li>
          <p>真实姓名：</p>
          <p>{{formData.idcardName || '--'}}</p>
        </li>
        <li>
          <p>证件号码：</p>
          <p>{{formData.idcardNum || '--'}}</p>
        </li>
        <li>
          <p>身份证照：</p>
          <img class="f-img" :src="formData.idcardUrl" alt="">
        </li>
        <li>
          <p>营业执照：</p>
          <img class="f-img" :src="formData.licenseUrl" alt="">
        </li>
      </ul>
    </div>

    <!-- <div class="f-card">
      <p class="f-title">
        <span>门店信息</span>
      </p>
      <div class="my-table-box">
        <el-table :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
          :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
          <el-table-column type="index" width="80" label="序号" align="center" />
          <el-table-column prop="shopId" label="门店ID" align="center">
            <template v-slot="scope">
              <el-link style="font-size:12px" type="primary" @click="lookDetail(scope.row.shopId)">
                {{ scope.row.shopId || '' }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="门店名称" align="center">
            <template v-slot="scope">
              {{ scope.row.shopName || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="contactsPhone" label="登录号码" align="center">
            <template v-slot="scope">
              <p>
                {{ scope.row.contactsPhone}}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="operationalStatus" label="门店状态" align="center">
            <template v-slot="scope">
              <p :style="{color: operationalStatusColor[scope.row.operationalStatus]}">
                {{ operationalStatus[scope.row.operationalStatus] }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="supplierShopName" label="上级代理" align="center">
            <template v-slot="scope">
              {{ scope.row.supplierShopName || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template v-slot="scope">
              {{ getDateTime(scope.row.createTime)[6] || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="Operations" label="操作" align="center">
            <template v-slot="scope">
              <el-link v-if="scope.row.operationalStatus == 1" style="font-size:12px" type="danger"
                @click="settingHandle(scope.row,0,'拉黑')">拉黑</el-link>
              <el-link v-else style="font-size:12px" @click="settingHandle(scope.row,1,'解除拉黑')">解除拉黑</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="my-table-footer">
          <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
            :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div> -->
  </section>

  <Shop-Edit v-else :isEdit="isEdit" :formData="formData" @setModify="getShopDetail" @cancelEdit="isEdit = false"></Shop-Edit>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import api from './api.js'
import ShopEdit from './add.vue'

export default {
  components: { ShopEdit },

  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      isEdit: false,

      shopId: route.query.shopId,
      formData: {},

      operationalStatus: {
        '0': '拉黑',
        '1': '正常',
        '2': '冻结',
      },
      operationalStatusColor: {
        '0': '#F56C6C',
        '1': '#2DB613',
        '2': '#E6A23C',
      },


      tableHeight: 0,
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
    })

    onMounted(() => {
      getShopDetail()
    })

    const getShopDetail = () => {
      state.isEdit = false
      let json = {
        shopId: state.shopId
      }
      api.shopDetail(json).then(res => {
        state.formData = res.data
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    return {
      ...toRefs(state),
      getDateTime,
      getShopDetail,
      handleCurrentChange,
      handleSizeChange
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-sale-detail {
  box-sizing: border-box;
  padding: 20px;

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-right: 10px;
    .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        align-items: center;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 85px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
    .f-img {
      width: 250px;
      height: 150px;
    }
  }

  .my-table-box {
    margin-top: 20px;

    .table-handle-box {
      display: flex;
      align-items: center;
      gap: 0 20px;
    }

    .my-table-footer {
      display: flex;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap;
      gap: 10px;
    }
  }
}
</style>